<template>
  <div class="page">
    <a-split
      :style="{
        height: '100vh',
        width: '100%',
        minWidth: '500px',
        border: '1px solid var(--color-border)',
      }"
      v-model:size="size.value"
      min="20px"
    >
      <template #first>
        <a-typography-paragraph
          ><TaskTable :treeData="tableData.treeData" v-if="tableData.treeData"
        /></a-typography-paragraph>
      </template>
      <template #second>
        <a-typography-paragraph
          ><MyCanvasX6
            :tableData="tableData.listData"
            :treeData="tableData.treeData"
            :lineData="tableData.lineData"
            v-if="
              tableData.listData && tableData.treeData && tableData.lineData
            "
        /></a-typography-paragraph>
      </template>
    </a-split>
  </div>
</template>
<script setup>
import { onMounted, reactive } from "vue";
import { getListData, getTreeData, getLines } from "@/controller/api.js";
import TaskTable from "@/components/TaskTable.vue";
import MyCanvasX6 from "@/components/MyCanvasX6.vue";
import { mockData, lineData } from "@/mock/mockData.js";
import { listToTree } from "@/utils/dataSet.js";
const size = reactive({ value: 0.5 });
const tableData = reactive({
  listData: null,
  treeData: null,
  lineData: null,
});
onMounted(async () => {
  // tableData.listData = await getListData();
  // tableData.treeData = await getTreeData();
  // tableData.lineData = await getLines();
  tableData.listData = mockData;
  tableData.treeData = listToTree(mockData);
  tableData.lineData = lineData;
});
</script>
<style scoped lang="scss">
.page {
  height: 100%;
  margin: 10px;
}
</style>
